<template>
  <div class="details-list">
    <van-nav-bar left-text="返回" title="诊疗项目" left-arrow @click-left="goHome" />
    <van-search
      v-model="value"
      shape="round"
      placeholder="请输入搜索关键词"
      @search="getDate()"
    />
    <!-- 标签栏 -->
    <!-- <clinic-list :active="active" /> -->
    <van-tabs color="#59cc6b" v-model="active" @change="setId">
      <van-tab
        v-for="item in data"
        :key="item.clinic_id"
        :title="item.clinic_title"
      >
      </van-tab>
    </van-tabs>
    <div class="list-main">
      <div v-if="empty != 501">
        <div
          class="main"
          @click="goDetails(index)"
          v-for="(list, index) in details"
          :key="list.details_id"
        >
          <p>{{ list.title }}</p>
          <span v-html="list.content" class="van-multi-ellipsis--l2"> </span>
          <span> {{ moment(list.time).format("YYYY年MM月DD日") }}</span>
        </div>
      </div>

      <van-empty
        image-size="100%"
        v-if="empty == 501"
        class="custom-image"
        image="/clinic/empty.png"
        description="暂无内容"
      />
      <van-tabbar v-model="activeBar">
        <van-tabbar-item to="/detailsList" icon="description"
          >诊疗详情</van-tabbar-item
        >
        <van-tabbar-item to="/clinicReg" icon="todo-list-o"
          >预约挂号</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import variable from "@/global/variable";

export default {
  // components: { ClinicList },
  data() {
    return {
      activeBar: 0,
      details: null,
      value: null,
      empty: "",
      cid: this.$route.query.id,
      active: variable.clinicActive,
      data: null,
      ID: 1,
    };
  },

  mounted() {
    this.getList();
  },
  methods: {
    setId(index) {
      variable.clinicActive = index;
      this.getDate();
    },
    getDate() {
      let kw = "";
      // console.log(this.$route.query.id);
      if (this.value != null) {
        kw = "&title=" + this.value;
      }

      // console.log("xxx");
      // http://127.0.0.1:3000/v1/clinicDetail/clinic_id?clinic_id=1
      let url =
        `clinicDetail/clinic_id?clinic_id=${this.data[this.active].clinic_id}` +
        kw;
      this.axios.get(url).then((res) => {
        this.details = res.data;
        this.empty = res.data.code;
        // console.log(this.empty);
      });
    },
    getList() {
      let url = `clinic/project`;
      this.axios.get(url).then((res) => {
        this.data = res.data;
        this.getDate();
      });
    },
    goDetails(i) {
      // console.log(this.details[i].details_id);
      this.$router.push("/clinicDetails?id=" + this.details[i].details_id);
    },
    goHome() {
      this.$router.push("/");
    },
    clickLike(list) {
      list.liked++;
      list.zanColor = "#ff0000";
    },
    clickBad(list) {
      list.bad++;
      list.caiColor = "#5f6368";
    },
  },

};
</script>

<style lang="scss" >
.details-list {
  .van-nav-bar__title{
    color: #fff;
  }
  .van-nav-bar {
    background-color: #36c14c;
    // background-image: linear-gradient(to left, rgba(0, 255, 0, 0), #59cc6b);
  }
  .van-nav-bar .van-icon {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
  .van-button--info {
    background-color: #36c14c;
    border-color: #36c14c;
  }
  .van-tabbar-item--active {
    color: #36c14c;
  }
  // background-color: #f6f6f6;
  height: 110%;
  // position: fixed;
  margin: 0;
  padding: 0;
  .van-search {
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    // background-color: #59cc6b;
    // background-image: linear-gradient(to top, rgba(0, 255, 0, 0), #59cc6b);
  }
  .van-search__content {
    border: 1px solid #59cc6b;
    // margin-bottom: 10px;
  }
.list-main{
  margin-bottom: 65px;
}
  .main {
    // background-color: #fff;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 0px 2px 4px rgb(0 0 0 / 10%);
    > p {
      font-weight: bold;
      padding: 10px;
      color: #222222;
    }
    > span {
      font-size: 14px;
      color: #9197a9;
      margin: 10px 10px 5px;
    }
    > span:last-child {
      font-size: 12px;
      // width: 355px;
      display: block;
      text-align: right;
      padding-bottom: 8px;
    }
  }
}
</style>
